<template>
    <div> 
        <p>this is my test:</p>
        <p>{{input}}</p>
        <input type="text" v-model="input"></input>
        <p>inputs:{{inputs}}</p>
        <div id="main" style="width: 600px;height:400px;"></div>
        <div class="row">
            <div class="col-lg-2" style="background-color:bule"></div>
        </div>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
            <li>Soda</li>
        </ul>
        <a href="javascript:;" @click="testLayer()" data-placement="bottom" data-original-title="新增 [ ADD ]" class="tooltips btn btn-circle btn-icon-only green">
            <i class="fa fa-plus"></i>
        </a>
    </div>
</template>
<script>
    var echarts = require('echarts');
    export default{
        data:function(){
            return {
                input:'',
            }
        },
        mounted: function () {
            this.charts();
            // this.get();
            // $("p").css("background-color","yellow");
            // console.log($("li").size());
        },
        computed:{
            inputs:function(){
                return this.input + 'span';
            }
        },
        methods:{
            get:function(){
                this.$http.get('../../test.json', {
                        emulateJSON: true
                    }).then(function(result) {
                        console.log('result:',result.data);
                    });
            },
            charts:function(){
                var myChart = echarts.init(document.getElementById('main'));
                myChart.setOption({
                    title: { text: 'ECharts 入门示例' },
                    tooltip: {},
                    xAxis: {
                        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                });
            },
            testLayer:function(){
                layer.alert('test');
            }
        }
    }
</script>